import React, { useEffect, useState } from "react";
import { Link, Switch, Route } from "react-router-dom";

// useEffect是用来处理副作用, useEffect就是函数组件用于定义生命周期的
// useEffect不需要返回值，传入的第一个参数是一个回调函数,第二个参数是一个数组(可选)

// 如果没有第二个参数，相当于componentDidMount以及componentDidUpdate
// 如果传入第二个参数是空数组，相当于componentDidMount
// 第二个数组不是空数组，相当于vue的watch侦听器
// 如果第一个回调函数里面又return了一个函数，那么这个函数就相当于componentWillUnmount
const Home = () => {
  const [count, setCount] = useState(3);
  const [num, setNum] = useState(10);

  useEffect(() => {
    console.log(count);
  }, [count]);

  const fn = () => {
    setCount((v) => v + 1);
  };
  const fn2 = () => {
    setNum((v) => v + 1);
  };

  useEffect(() => {
    return () => {
      console.log("我被卸载了");
    };
  }, []);

  return (
    <>
      <h2>useEffect</h2>
      <span>count: {count}</span>
      <button onClick={fn}>count++</button>

      <hr />

      <span>num: {num}</span>
      <button onClick={fn2}>num++</button>
    </>
  );
};

const About = () => {
  return <div>about页面</div>;
};

const App = () => {
  return (
    <>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </>
  );
};

export default App;
